<!--  -->
<template>
  <div class="child">
    <h1>----------------Home页面--------------------</h1>
    <h2>{{msg}}</h2>
    <h2 :class="{classB:isShow}">我正在学习ref的使用</h2>
    <h2>{{fatherMsg}}</h2>
    <button class="btn"
            @click="btnClick">通过ref给App传递数据</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello Home',
      isShow: true,
      childMsg: "我是Home子页面的信息"
    }
  },
  props: {
    fatherMsg: {
      type: String,
      required: true,
      default: "隔壁老王"
    }
  },
  methods: {
    btnClick () {
      this.$emit('haha', this.childMsg)
    }
  },
  mounted () {
    // this.$emit('haha', this.childMsg)
  }
}
</script>
<style scoped>
.child {
  width: 60%;
  height: 300px;
  background-color: #efefef;
  margin: 0 auto;
}
.classB {
  border: 1px solid blue;
}
</style>